<script src="/login/status"></script>
<script>
  if (!isLogin) {
    location.href = 'admin/login.html'
  }
</script>
<script>
  // 从浏览器的地址栏中获取查询参数
  function getUrlParams(name) {
    var paramsAry = location.search.substr(1).split('&');
    // 循环数据
    for (var i = 0; i < paramsAry.length; i++) {
      var tmp = paramsAry[i].split('=');
      if (tmp[0] == name) {
        return tmp[1];
      }
    }
    return -1;
  }
  if (getUrlParams('id') == -1) location.href = 'index.html'
</script>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>阿里百秀-发现生活，发现美!</title>
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.css">
</head>

<body>
  <div class="wrapper">
    <div class="topnav">
      <ul id="topNavBox">
    </div>
    <div class="header">
      <h1 class="logo"><a href="index.html"><img src="assets/img/logo.png" alt=""></a></h1>
      <ul class="nav" id="navBox">
      </ul>
      <div class="search">
        <form>
          <input type="text" class="keys" placeholder="输入关键字">
          <input type="submit" class="btn" value="搜索">
        </form>
      </div>
    </div>
    <div class="aside">
      <div class="widgets">
        <h4>搜索</h4>
        <div class="body search">
          <form>
            <input type="text" class="keys" placeholder="输入关键字">
            <input type="submit" class="btn" value="搜索">
          </form>
        </div>
      </div>
      <div class="widgets">
        <h4>随机推荐</h4>
        <ul class="body random" id="publicBox">
        </ul>
      </div>
      <div class="widgets">
        <h4>最新评论</h4>
        <ul class="body discuz" id="commentBox">
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="article" id="article">
      </div>
      <div id="comment"></div>
      <div class="panel hots">
        <h3>热门推荐</h3>
        <ul id="recommendBox">
        </ul>
      </div>
    </div>
    <div class="footer">
      <p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>
    </div>
  </div>
</body>
<script src="assets/vendors/swipe/swipe.js"></script>
<script src="./assets/vendors/jquery/jquery.min.js"></script>
<script src="./assets/vendors/art-template/template-web.js"></script>
<script src="./assets/js/recommend.js"></script>
<script src="./assets/js/public.js"></script>
<!-- 搜索结果模板 -->
<script type="text/html" id="postTpl">
  <div class="breadcrumb">
    <dl>
      <dt>当前位置：</dt>
      <dd><a href="javascript:;">{{category.title}}</a></dd>
      <dd>{{title}}</dd>
    </dl>
  </div>
  <h2 class="title">
    <a href="javascript:;">{{title}}</a>
  </h2>
  <div class="meta">
    <span>{{author.nickName}} 发布于{{$imports.formdate(createAt)}}</span>
    <span>分类: <a href="javascript:;">{{category.title}}</a></span>
    <span>阅读: ({{meta.views}})</span>
    <span>评论: ({{meta.comments}})</span>
    <a href="javascript:;" id="like">赞</a>
  </div>
</script>
<!-- 评论模板 -->
<script type="text/html" id="commentTpl">
  <style type="text/css">
    .comment {
      margin-bottom: 20px;
    }

    .comment textarea {
      box-sizing: border-box;
      padding: 10px;
      width: 100%;
      height: 80px;
      display: block;
    }

    .comment input {
      width: 100px;
      height: 30px;
      margin-top: 10px;
    }
  </style>
  <div class="comment">
    <form id="commentForm">
      <textarea></textarea>
      <input type="submit" value="提交评论">
    </form>
  </div>
</script>
<script>
  // 从地址栏中获取文章id
  var postId = getUrlParams('id');
  $.ajax({
    type: 'get',
    url: '/posts/' + postId,
    success: function (response) {
      var html = template('postTpl', response);
      $('#article').html(html)
    }
  })
  //添加点赞功能
  $('#article').on('click', '#like', function () {
    // 向服务器端发送请求 执行点赞操作
    $.ajax({
      type: 'post',
      url: '/posts/fabulous/' + postId,
      success: function () {
        alert('点赞成功, 感谢您的支持')
      }
    })
  })
  //查询网站是否开启了评论功能
  $.ajax({
    type: 'get',
    url: '/settings',
    success: function (response) {
      review = response.review
      // 判断管理员是否开启的评论功能
      if (response.comment) {
        // 管理员开启了评论功能 渲染评论模板
        var html = template('commentTpl');
        // 渲染评论模板
        $('#comment').html(html);
      }
    }
  });
  //发送添加评论请求
  $('#comment').on('submit', '#commentForm', function () {
    var content = $(this).find('textarea').val()
    // 向服务器端发送请求 执行添加评论操作
    var state;

    if (review) {
      // 要经过人工审核
      state = 0;
    } else {
      // 不需要经过人工审核
      state = 1;
    }
    console.log(content);
    console.log(postId);
    console.log(userId);
    console.log(state);

    $.ajax({
      type: 'post',
      url: '/comments',
      data: {
        content: content,
        post: postId,
        author: userId
      },
      success: function () {
        alert('评论成功')
        location.reload();
      },
      error: function () {
        alert('评论失败')
      }
    })
    return false;
  })
</script>

</html>